class move {
  constructor() {
    this.oDiv = document.getElementById('div1');
    this.oP = document.getElementById('p1');
    this.x = 0;
    this.y = 0;
  }
  down() {
    var _this = this;
    // console.log(this);
    _this.oDiv.onmousedown = function(ev) {
      // console.log(1);
      _this.ev = ev||event;
      _this.disX = ev.clientX-_this.oDiv.offsetLeft;
      _this.disY = ev.clientY-_this.oDiv.offsetTop;
      _this.oP.style.left = _this.x + 'px';
      _this.oP.style.top = _this.y + 'px';
      document.onmousemove = function(ev) {
        var ev = ev||event;
        _this.x = ev.clientX - _this.disX;
        _this.y = ev.clientY - _this.disY;
        _this.oP.style.left = _this.x + 'px';
        _this.oP.style.top = _this.y + 'px';
      }
      document.onmouseup = function() {
        _this.oDiv.style.left = _this.x + 'px';
        _this.oDiv.style.top = _this.y + 'px';
        document.onmouseup = null;
        document.onmousemove = null;
      }
      return false;
    }
   }
}
window.onload = function() {
  var n = new move();
  n.down();
}


// window.onload = function(){
  // var oDiv = document.getElementById('div1');
  // var oP = document.getElementById('p1');
  // var x = 0;
  // var y = 0;
  // oDiv.onmousedown = function(ev) {
  //   var ev = ev||event;
  //   var disX = ev.clientX-oDiv.offsetLeft;
  //   var disY = ev.clientY-oDiv.offsetTop;
  //   oP.style.left = x + 'px';
  //   oP.style.top = y + 'px';
  //   document.onmousemove = function(ev) {
  //     var ev = ev||event;
  //     x = ev.clientX - disX;
  //     y = ev.clientY - disY;
  //     oP.style.left = x + 'px';
  //     oP.style.top = y + 'px';
  //   }
  //   document.onmouseup = function() {
  //     oDiv.style.left = x + 'px';
  //     oDiv.style.top = y + 'px';
  //     document.onmouseup = null;
  //     document.onmousemove = null;
  //   }
  //   return false;
  // }
// }
